<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <script type="text/javascript">
            const siteUrl = "./",
                musicMp3 = "media/bgm.mp3"
        </script>

        <link rel="stylesheet" href="css/music.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css" type="text/css" />
	</head>
	<body>

        <div class="pop-bg-share">
            <div class="pop-box" id="rule">
                <img class="pop-close" src="images/pop_close_img.png" alt="" />
                <h1>规则与条款</h1>
                <div class="pop-box-content">
                    <p>这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字这里是规则文字</p>
                </div>
            </div>
        </div>

        <div class="pop-bg">
            <div class="pop-box-follow">
                <p>动动手指，即刻关注</p>
                <p>「大华银行尊享财富」，</p>
                <p>和朋友一起<span>“牛气要冲天”</span>。</p>
                <img src="images/qr_code_img.jpg" alt="" />
            </div>

            <div class="pop-rank-box" id="rank">
                <img class="rank-title" src="images/rank_title_img.png" alt="" />
                <div class="rank-list-title flex">
                    <div class="rank-list-title-num">名次</div>
                    <div class="rank-list-title-name">用户昵称</div>
                    <div class="rank-list-title-score">冲天米数</div>
                </div>
                <div class="rank-list-content">
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num"><img src="images/rank_icon_first.png" alt="" /></div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num"><img src="images/rank_icon_secend.png" alt="" /></div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num"><img src="images/rank_icon_third.png" alt="" /></div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num">4</div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num">5</div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num">6</div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num">7</div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num">8</div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num">9</div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                    <div class="rank-list-content-item flex">
                        <div class="rank-list-content-item-num">10</div>
                        <div class="rank-list-content-item-info flex">
                            <div class="rank-list-content-item-info-user flex">
                                <img src="images/user_demo_img.jpg" alt="" />
                                <h1>这里是微信昵称这里是微信昵称</h1>
                            </div>
                            <div class="rank-list-content-item-score">4698</div>
                        </div>
                    </div>
                </div>
                <div class="rank-list-content-item my flex">
                    <div class="rank-list-content-item-num">16</div>
                    <div class="rank-list-content-item-info flex">
                        <div class="rank-list-content-item-info-user flex">
                            <img src="images/user_demo_img.jpg" alt="" />
                            <h1>这里是微信昵称这里是微信昵称</h1>
                        </div>
                        <div class="rank-list-content-item-score">4698</div>
                    </div>
                </div>
                <div class="rank-btn-box flex">
                    <div class="rule-btn"></div>
                    <div class="back-btn"></div>
                </div>
            </div>
        </div>

        <div class="page loading" id="loading">
            <img class="logo" src="images/logo.png" alt="" />
            <img class="slogan" src="images/slogan_img.png" alt="" />
            <div id="maleCow">
                <img class="loading-bg" src="images/loading_bg.gif" width="100%" alt="" />
                <img class="loading animate__animated animate__shakeX animate__slower animate__infinite" src="images/loading_img.png" alt="" />
            </div>
            <div id="famaleCow">
                <img class="loading1" src="images/loading1.gif" alt="" />
            </div>
            <div class="loading-box flex">
                <div class="loading-bar-box"><em></em></div>
                <p>loading……<span id="num">0</span>%</p>
            </div>
        </div>

        <div class="page index" id="index">
            <img class="logo" src="images/logo.png" alt="" />
            <div class="animate__animated animate__infinite animate__pulse1 animate__slower">
                <img class="slogan" src="images/slogan_img.png" alt="" />
                <img class="index-text" src="images/index_text_img.png" width="100%" alt="" />
            </div>
            <div class="index-game-start">
                <img src="images/game_cow_img.png" width="100%" alt="" />
                <img class="game-cow-fire" src="images/game_cow_img_fire.png" alt="" />
                <div class="index-point-box">
                    <em class="animate__animated animate__infinite white"></em>
                    <em class="animate__animated animate__infinite white"></em>
                    <em class="animate__animated animate__infinite white"></em>
                    <em class="animate__animated animate__infinite white"></em>
                    <img class="animate__animated animate__infinite animate__slower animate__shakeX" src="images/index_point_img.png" alt="" />
                </div>
            </div>
            <div class="index-bottom">
                <div class="index-bottom-btn-box flex">
                    <div class="rule-btn"></div>
                    <div class="rank-btn"></div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/music.js"></script>
        <script type="text/javascript">
            $(document).ready(function (e) {
                $('.pop-close').click(function (e) {
                    $('.pop-bg-share').removeClass('show');
                    $('.pop-box').hide();
                })

                $('.rule-btn').click(function (e) {
                    $('.pop-bg-share').addClass('show');
                    $('#rule').show();
                })

                $('.index-game-start').click(function (e) {
                    window.location.href = 'game.html';
                })

                $('.back-btn').click(function (e) {
                    $('.pop-bg').removeClass('show');
                    $('#rank').hide();
                })

                $('.rank-btn').click(function (e) {
                    $('.pop-bg').addClass('show');
                    $('#rank').show();
                })

                let randomNum = Math.round(Math.random());
                if (randomNum == 1) {
                    $('#maleCow').hide();
                }else{
                    $('#famaleCow').hide();
                }

                let loadingTime = 0;
                let loadingRound = setInterval(function () {
                    loadingTime++;
                    $('.loading-bar-box').find('em').width(loadingTime+'%');
                    $('#num').html(loadingTime);
                    if (loadingTime >= 100) {
                        clearInterval(loadingRound);
                        $('#loading').hide();
                        $('#index').show();
                    }
                },10);
            });
        </script>
	</body>
</html>
